<template>
<div class="office-system-container">

    <!-- 主内容区 -->
    <main class="modules-container">
        <!-- 报工模块 -->
        <template v-if="me != '管理员'">
            <section class="module-card workreport-module" @mouseenter="animateModule('workreport')" @mouseleave="stopAnimation('workreport')">
            <div class="module-header">
                <i class="fas fa-clock module-icon"></i>
                <h2>报工模块</h2>
            </div>
            <div class="module-buttons" >
                <template v-if="me != '总经理'" >
                    <button class="module-btn" @click="handleAction('report')" >
                        <el-badge :value="num1" :hidden="num1 == 0">
                            <i class="fas fa-file-alt"></i> 漏报待办
                        </el-badge>
                    </button>
                </template>
                <template v-if="me != '总经理'">
                    <button class="module-btn" @click="handleAction('report')">
                        <el-badge :value="num2" :hidden="num2 == 0">
                            <i class="fas fa-file-alt"></i> 驳回待办
                        </el-badge>
                    </button>
                </template>
                <template v-if="me == '部门经理'">
                    <button class="module-btn" @click="handleAction('report')">
                        <el-badge :value="num3" :hidden="num3 == 0">
                            <i class="fas fa-file-alt"></i> 审批待办
                        </el-badge>
                    </button>
                </template>
            </div>
        </section>

        <!-- 请假模块 -->
        <section class="module-card leave-module" @mouseenter="animateModule('leave')" @mouseleave="stopAnimation('leave')">
            <div class="module-header">
                <i class="fas fa-calendar-alt module-icon"></i>
                <h2>请假模块</h2>
            </div>
            <div class="module-buttons">
                <template v-if="me != '总经理'">
                    <button class="module-btn" @click="handleAction('absenceback')">
                        <el-badge :value="num4" :hidden="num4 == 0">
                            <i class="fas fa-file-alt"></i> 驳回待办
                        </el-badge>
                    </button>
                </template>
                <template v-if="me != '员工'">
                    <button class="module-btn" @click="handleAction('absenceaudit')">
                        <el-badge :value="num5" :hidden="num5 == 0">
                            <i class="fas fa-file-alt"></i> 审核待办
                        </el-badge>
                    </button>
                </template>
            </div>
        </section>

        <!-- 订餐模块 -->
        <section class="module-card catering-module" @mouseenter="animateModule('catering')" @mouseleave="stopAnimation('catering')">
            <div class="module-header">
                <i class="fas fa-utensils module-icon"></i>
                <h2>订餐模块</h2>
            </div>
            <div class="module-buttons">
                <template v-if="me == '员工'">
                    <button class="module-btn" @click="handleAction('orderback')">
                        <el-badge :value="num6" :hidden="num6 == 0">
                            <i class="fas fa-file-alt"></i> 驳回待办
                        </el-badge>
                    </button>
                </template>
                <template v-if="me != '员工'">
                    <button class="module-btn" @click="handleAction('orderaudit')">
                        <el-badge :value="num7" :hidden="num7 == 0">
                            <i class="fas fa-file-alt"></i> 审核待办
                        </el-badge>
                    </button>
                </template>
            </div>
        </section>

        <!-- 差旅模块 -->
        <section class="module-card travel-module" @mouseenter="animateModule('travel')" @mouseleave="stopAnimation('travel')">
            <div class="module-header">
                <i class="fas fa-plane module-icon"></i>
                <h2>差旅模块</h2>
            </div>
            <div class="module-buttons">
                <template v-if="me != '总经理'">
                    <button class="module-btn" @click="handleAction('travelback')">
                        <el-badge :value="num8" :hidden="num8 == 0">
                            <i class="fas fa-file-alt"></i> 驳回待办
                        </el-badge>
                    </button>
                </template>
                <template v-if="me !='员工'">
                    <button class="module-btn" @click="handleAction('travelaudit')">
                        <el-badge :value="num9" :hidden="num9 == 0">
                            <i class="fas fa-file-alt"></i> 审核待办
                        </el-badge>
                    </button>
                </template>
            </div>
        </section>

        <!-- 采购模块 -->
        <section class="module-card purchase-module" @mouseenter="animateModule('purchase')" @mouseleave="stopAnimation('purchase')">
            <div class="module-header">
                <i class="fas fa-shopping-cart module-icon"></i>
                <h2>采购模块</h2>
            </div>
            <div class="module-buttons">
                <template v-if=" me == '员工'">
                    <button class="module-btn" @click="handleAction('cg')">
                        <el-badge :value="num10" :hidden="num10 == 0">
                            <i class="fas fa-file-alt"></i> 驳回待办
                        </el-badge>
                    </button>
                </template>
                <template v-if="me != '员工'">
                    <button class="module-btn" @click="handleAction('cg')">
                        <el-badge :value="num11" :hidden="num11 == 0">
                            <i class="fas fa-file-alt"></i> 审核待办
                        </el-badge>
                    </button>
                </template>
            </div>
        </section>

        <!-- 物资借用模块 -->
        <section class="module-card material-module" @mouseenter="animateModule('material')" @mouseleave="stopAnimation('material')">
            <div class="module-header">
                <i class="fas fa-boxes module-icon"></i>
                <h2>物资借用</h2>
            </div>
            <div class="module-buttons">
                <template v-if="me != '总经理'">
                    <button class="module-btn" @click="handleAction('borrowback')">
                        <el-badge :value="num12" :hidden="num12 == 0">
                            <i class="fas fa-file-alt"></i> 借用驳回待办
                        </el-badge>
                    </button>
                    <button class="module-btn" @click="handleAction('returnback')">
                        <el-badge :value="num13" :hidden="num13 == 0">
                            <i class="fas fa-file-alt"></i> 归还驳回待办
                        </el-badge>
                    </button>
                </template>
                <template v-if="me =='部门经理' || isKeeper">
                    <button class="module-btn" @click="handleAction('borrowaudit')">
                        <el-badge :value="num14" :hidden="num14 == 0">
                            <i class="fas fa-file-alt"></i> 借用审核待办
                        </el-badge>
                    </button>
                </template>
                <template v-if="isKeeper">
                    <button class="module-btn" @click="handleAction('returnaudit')">
                        <el-badge :value="num15" :hidden="num15 == 0">
                            <i class="fas fa-file-alt"></i> 归还审核待办
                        </el-badge>
                    </button>
                </template>
            </div>
        </section>
        </template>
        <template v-else>
            <img src="../../../public/background.jpg" style="height: 500px; width: 1100px;">
            
        </template>
    </main>

</div>
</template>

<script>
export default {
    name: 'OfficeModules',
    data() {
        return {
            // 动画状态管理
            animations: {
                leave: false,
                travel: false,
                material: false,
                purchase: false,
                catering: false,
                workreport: false
            },
            // 提示框状态
            showToast: false,
            toastMessage: '',
            toastType: '',
            roleid:[],
            me:'',
            isKeeper:false,
            num1:0,
            num2:0,
            num3:0,
            num4:0,
            num5:0,
            num6:0,
            num7:0,
            num8:0,
            num9:0,
            num10:0,
            num11:0,
            num12:0,
            num13:0,
            num14:0,
            num15:0,
        }
    },
    methods: {
        // 启动模块动画
        animateModule(moduleName) {
            this.animations[moduleName] = true;
        },
        // 停止模块动画
        stopAnimation(moduleName) {
            this.animations[moduleName] = false;
        },
        // 处理按钮点击事件
        handleAction(val){
            this.$router.push({
                name:val
            })
        },
        parseRoleidStr(roleStr){
            if(!roleStr) return [];
            return roleStr.split(',').map(id => Number(id)).filter(id => !isNaN(id));
        },
        whoami(){
            if (this.roleid.includes(2)) {
                this.me = '总经理'
            } else if (this.roleid.includes(3)) {
                this.me = '部门经理'
            } else if (this.roleid.includes(4)) {
                this.me = '员工'
            } else if (this.roleid.includes(1)) {
                this.me = '管理员'
            }
            if (this.roleid.includes(5)){
                this.isKeeper = true
            }
            this.getWitchNum()

        },
        getWitchNum(){
            if(this.me == '员工'){

                //优化
                this.getNum1()
                this.getNum2()
                this.getNum4()
                this.getNum6()
                this.getNum8()
                this.getNum10()
                this.getNum12()
                this.getNum13()
                if(this.isKeeper) {
                    this.getNum142()
                    this.getNum15()
                }
            } else if (this.me == '部门经理') {
                this.getNum1()
                this.getNum2()
                this.getNum3()
                this.getNum4()
                this.getNum5()
  
                this.getNum7()
                this.getNum8()
                this.getNum9()
                this.getNum111()
                this.getNum13()
                if(this.isKeeper){
                    this.getNum143()
                    this.getNum15()
                } else {
                    this.getNum141()
                }
            } else if (this.me == '总经理') {
                this.getNum5()
                this.getNum7()
                this.getNum9()
                this.getNum112()
            }
        },

        getNum1(){
            this.$http.post('/getLostDate',{
                empno:parseInt(localStorage.getItem("empno")),
                page:1,
                limit:99
            }).then(res=>{
                this.num1 = res.data.count
            })
        },
        getNum2(){
            this.$http.get('/getReturnReportNum?empno=' + localStorage.getItem("empno")).then(res=>{
                this.num2 = res.data
            })
        },
        getNum3(){
            this.$http.post('/getCheckReport',{
                deptno:localStorage.getItem("deptno"),
                page:1,
                limit:99
            }).then(res =>{
                this.num3 = res.data.count
            })
        },
        getNum4(){
            this.$http.get('/getMyToDoAbsence?userid='+ localStorage.getItem('userid')).then(res=>{
                this.num4 = res.data
            })
        },
        getNum5(){
            this.$http.get('/getMyAuditAbsence?deptno=' + localStorage.getItem('deptno')).then(res=>{
                this.num5 = res.data
            })
        },
        getNum6(){
            this.$http.get('/getOrderNum?empno=' + localStorage.getItem('empno')).then(res=>{
                this.num6 = res.data
            })
        },
        getNum7(){
            this.$http.get('/getReviewNum?deptno=' + localStorage.getItem('deptno')).then(res=>{
                this.num7 = res.data
            })
        },
        getNum8(){
            this.$http.get('/getRejectCount?empno=' + localStorage.getItem('empno')).then(res=>{
                this.num8 = res.data
            })
        },
        getNum9(){
            this.$http.post('/getApprovalCount',{
                empno:localStorage.getItem('empno'),
                roleids:this.roleid
            }).then(res=>{
                this.num9 = res.data
            })
        },
        getNum10(){
            this.$http.get('/getCgglEmpToDoCount?ename=',localStorage.getItem("ename")).then(res=>{
                this.num10 = res.data
            })
        },
        getNum111(){
            this.$http.get('/getCgglManagerToDoCount?ename=' + localStorage.getItem('ename')).then(res=>{
                this.num11 = res.data
            })
        },
        getNum112(){
            this.$http.get('/getCgglGenManagerToDoCount').then(res=>{
                this.num11 = res.data
            })
        },
        getNum12(){
            this.$http.get('/lc/getPersonalBorrowBackLog?empNo=' + localStorage.getItem("empno")).then(res=>{
                this.num12 = res.data
            })
        },
        getNum13(){
            this.$http.get('/lc/getPersonalReturnBackLog?empNo=' + localStorage.getItem('empno')).then(res=>{
                debugger
                this.num13 = res.data
            })
        },
        getNum141(){
            //部门经理借用审核待办
            this.$http.get('/lc/getDeptBorrowBackLog?deptNo=' + localStorage.getItem('deptno')).then(res =>{
                this.num14 = res.data
            })
        },
        getNum142(){
            //仓管员借用审核
            this.$http.get('/lc/getWarehouseBorrowBackLog?empNo=' + localStorage.getItem('empno')).then(res=>{
                this.num14 = res.data
            })
        },
        getNum143(){
            //部门经理和仓管员借用审核
            this.$http.get('/lc/getDoubleIdentityBorrowBackLog?empNo=' + localStorage.getItem('empno')).then(res=>{
                this.num14 = res.data
            })
        },
        getNum15(){
            //仓管员归还审核
            this.$http.get('/lc/getWarehouseReturnBackLog?empNo=' + localStorage.getItem('empno')).then(res=>{

                this.num15 = res.data
            })
        }
        
    },
    mounted(){
        this.roleid = this.parseRoleidStr(localStorage.getItem("roleid"))
        this.whoami();
        
    
    },
    watch: {
        // 监听动画状态变化，应用相应的CSS类
        animations: {
            deep: true,
            handler(newVal) {
                Object.keys(newVal).forEach(module => {
                    const element = document.querySelector(`.${module}-module`);
                    if (element) {
                        if (newVal[module]) {
                            element.classList.add('module-active');
                        } else {
                            element.classList.remove('module-active');
                        }
                    }
                });
            }
        }
    }
}
</script>

<style scoped>
/* 基础样式 */
.office-system-container {
    display: flex;
    flex-direction: column;
    min-height: 80vh;
    background-color: #f5f7fa;
    color: #333;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 头部样式 */
.system-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    height: 60px;
    background-color: #2c3e50;
    color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo i {
    font-size: 1.5rem;
}

.logo h1 {
    font-size: 1.2rem;
    margin: 0;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.username {
    font-weight: 500;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

/* 主内容区样式 */
.modules-container {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* 模块卡片样式 */
.module-card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.module-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    transition: all 0.3s ease;
}

/* 各模块独特颜色标识 */
.leave-module::before {
    background-color: #3498db;
}

.travel-module::before {
    background-color: #2ecc71;
}

.material-module::before {
    background-color: #9b59b6;
}

.purchase-module::before {
    background-color: #e67e22;
}

.catering-module::before {
    background-color: #1abc9c;
}

.workreport-module::before {
    background-color: #f39c12;
}

.module-header {
    padding: 1.2rem;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #f1f1f1;
}

.module-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2rem;
    color: white;
}

.leave-module .module-icon {
    background-color: #3498db;
}

.travel-module .module-icon {
    background-color: #2ecc71;
}

.material-module .module-icon {
    background-color: #9b59b6;
}

.purchase-module .module-icon {
    background-color: #e67e22;
}

.catering-module .module-icon {
    background-color: #1abc9c;
}

.workreport-module .module-icon {
    background-color: #f39c12;
}

.module-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
}

.module-buttons {
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.module-btn {
    padding: 0.8rem 0.5rem;
    background-color: #f8f9fa;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.module-btn i {
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
}

.module-btn:hover {
    background-color: #f1f3f5;
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* 模块激活动画效果 */
.module-active {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 页脚样式 */
.system-footer {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2c3e50;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

/* 提示框样式 */
.toast-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    background-color: #3498db;
    color: white;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    animation: slideIn 0.3s ease-out forwards;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 各模块提示框颜色 */
.toast-leave {
    background-color: #3498db;
}

.toast-travel {
    background-color: #2ecc71;
}

.toast-material {
    background-color: #9b59b6;
}

.toast-purchase {
    background-color: #e67e22;
}

.toast-catering {
    background-color: #1abc9c;
}

.toast-workreport {
    background-color: #f39c12;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .modules-container {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 1rem;
    }

    .system-header {
        padding: 0 1rem;
    }

    .logo h1 {
        font-size: 1rem;
    }

    .module-buttons {
        grid-template-columns: 1fr;
    }
}

</style>
